<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <script src="./element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/global.css">

    <link rel="stylesheet" href="./css/read.css">


    <link rel="stylesheet" href="editor.md-master/css/editormd.preview.css"/>

    <script src="./js/jquery.js"></script>
    <script src="editor.md-master/editormd.js"></script>
    <script src="editor.md-master/lib/marked.min.js"></script>
    <script src="editor.md-master/lib/prettify.min.js"></script>
    <script src="./js/axios.js"></script>
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-container>
                <div>
                    <el-tabs v-model="menu1" @tab-click="handleClick">
                        <el-tab-pane label="首页" name="first"></el-tab-pane>
                        <el-tab-pane label="首页"></el-tab-pane>
                        <el-tab-pane label="首页"></el-tab-pane>
                        <el-tab-pane label="首页"></el-tab-pane>
                        <el-tab-pane label="首页"></el-tab-pane>
                        <el-tab-pane label="首页"></el-tab-pane>
                        <el-tab-pane label="首页"></el-tab-pane>
                        <el-tab-pane label="首页"></el-tab-pane>
                        <el-tab-pane label="首页"></el-tab-pane>
                        <el-tab-pane label="首页"></el-tab-pane>
                    </el-tabs>
                </div>
                <div>
                    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div>
                    <el-dropdown split-button type="primary">
                        发布文章
                        <el-dropdown-menu>
                            <el-dropdown-item icon="el-icon-document">草稿箱</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div v-if="{login:false}">
                    <el-button type="primary" @click="open" plain>
                            <span>
                                登陆
                            </span>
                        <el-divider direction="vertical"></el-divider>
                        <span>
                                注册
                            </span>
                    </el-button>
                </div>
                <div v-if="{login:false}">
                    <i class=" el-icon-message-solid" style="font-size:40px;"></i>
                </div>
                <div v-if="{login:false}">
                    <div>
                        <el-avatar :size="40" :src="circleUrl"></el-avatar>
                    </div>
                </div>
            </el-container>
        </el-header>
        <el-main>
            <el-container>
                <el-aside width="100px" direction="vertical">
                    <div>
                        <el-button icon="el-icon-d-caret" circle></el-button>
                    </div>
                    <div>
                        <el-button icon="el-icon-s-comment" circle></el-button>
                    </div>
                    <div>
                        <el-button icon="el-icon-star-on" @click="centerDialogVisible = true" circle></el-button>
                    </div>
                </el-aside>
                <el-main>
                    <el-container direction="vertical">
                        <el-card>
                            <div>
                                <h2>我发布了文章</h2>
                            </div>
                            <div style="display: flex; justify-content: space-between;">
                                <div>
                                    <el-link href="" target="_blank">用户7873187117</el-link>
                                    <span>2024-07-16</span>
                                    <span>
                                            <i class="el-icon-view">29k</i>
                                        </span>
                                </div>
                                <div>
                                    <el-link href="" type="primary">编辑</el-link>
                                </div>

                            </div>
                            <el-container direction="vertical">
                                <div>
                                    <div id="test-markdown-view">
                                        <!-- Server-side output Markdown text -->
                                        <textarea style="display:none;"></textarea>
                                    </div>
                                </div>
                                <div>
                                    <span>标签：</span>
                                    <el-tag type="info">后端</el-tag>
                                    <el-tag type="info">spring</el-tag>
                                    <el-tag type="info">springMVC</el-tag>
                                    <el-tag type="info">mybatis</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>
                                    <el-tag type="info">springBoot</el-tag>

                                </div>
                            </el-container>
                        </el-card>
                        <el-card class="box-card">
                            <div>
                                <h2>评论&nbsp;
                                    <span>
                                            6
                                        </span>
                                </h2>
                            </div>
                            <div>
                                <el-image :src="a"></el-image>
                                <h4>暂无评论数据</h4>
                            </div>
                            <div>
                                <div style="display: flex">
                                    <el-avatar :src="circleUrl"></el-avatar>
                                    <el-input type="textarea" autosize placeholder="请输入内容" v-model="text"
                                              maxlength="1000" show-word-limit></el-input>
                                    <el-button type="primary" disabled="">发送</el-button>
                                </div>
                                <div>
                                    <div>
                                        <el-link type="primary">最热</el-link>
                                        <el-divider direction="vertical"></el-divider>
                                        <el-link href="" target="_blank">最新</el-link>
                                    </div>
                                </div>
                                <div>

                                    <div class="flex-box">
                                        <div>
                                            <el-avatar :src="circleUrl"></el-avatar>
                                        </div>
                                        <div>
                                            <div>
                                                <el-link href="">碰碰Up</el-link>
                                            </div>
                                            <div>
                                                <p>
                                                    难道你们没有遇到过，用git rebase也会重复创建提交记录，并且还会有合并本地分支记录的情况？
                                                </p>
                                            </div>
                                            <div>
                                                <span>4天前</span>
                                                <el-link href=""><i class="el-icon-star-off"></i>3</el-link>
                                                <el-link href=""><i class="el-icon-s-comment"></i>22</el-link>
                                            </div>
                                            <!-- comment2 -->
                                            <div class="flex-box">
                                                <div>
                                                    <el-avatar :src="circleUrl"></el-avatar>
                                                </div>
                                                <div>
                                                    <p>
                                                        <el-link href="">是小时Orz</el-link>
                                                        <el-tag type="info">作者</el-tag>
                                                        <span>：</span>
                                                        <span>木有出现过</span>
                                                    </p>
                                                    <div>
                                                        <span>4天前</span>
                                                        <el-link href=""><i
                                                                class="el-icon-star-off"></i>点赞
                                                        </el-link>
                                                        <el-link href=""><i
                                                                class="el-icon-s-comment"></i>回复
                                                        </el-link>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- comment3 -->
                                            <div class="flex-box">
                                                <div>
                                                    <el-avatar :src="circleUrl"></el-avatar>
                                                </div>
                                                <div>
                                                    <p>
                                                        <el-link href="">碰碰Up
                                                        </el-link>
                                                        <span>回复</span>
                                                        <el-link href="">是小时Orz
                                                        </el-link>
                                                        <el-tag type="info">作者</el-tag>
                                                        <span>：</span>
                                                        <span> :
                                                                怎么会没有出现呢，比如你在目标分支master上，提交几次记录。然后在本地分支提交几次记录，最后本地分支执行
                                                                git rebase master，就会出现了啊</span>
                                                    </p>
                                                    <div>
                                                        <span>4天前</span>
                                                        <el-link href=""><i
                                                                class="el-icon-star-off"></i>点赞
                                                        </el-link>
                                                        <el-link href=""><i
                                                                class="el-icon-s-comment"></i>回复
                                                        </el-link>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div>
                                        <el-button>查看所有<span>6</span>条评论</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-container>
                </el-main>

            </el-container>
        </el-main>
    </el-container>


    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
        <span>需要注意的是内容是默认不居中的</span>
        <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
    </el-dialog>
    <el-dialog title="新建收藏集" :visible.sync="centerDialogVisible2" width="30%" center>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
    </el-dialog>
</div>
</body>

<script src="./js/read.js"></script>

</html>